<template>
  <Echart
    id="rightTop"
    :options="option"
    class="right_top_inner"
    v-if="pageflag"
    ref="charts"
  />
  <Reacquire v-else @onclick="getData" style="line-height: 200px">
    重新获取
  </Reacquire>
</template>

<script>
import { currentGET } from "api/modules";
export default {
  data() {
    return {
      option: {},
      pageflag: false,
      timer: null,
    };
  },
  created() {},

  mounted() {
     this.getData();
  },
  beforeDestroy() {
    this.clearData();
  },
  methods: {
    clearData() {
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
    },
    getData() {
      this.pageflag = true;
      currentGET("big4", { status: "全国疫情新增趋势" }).then((res) => {
        if (!this.timer) {
        }
        if (res) {
          const HalfArr =  res.slice(res.length-15,res.length)
          const HalfDate = []
          const NumOne = []
          const NumTwo = []
          HalfArr.map(item=>{
            HalfDate.push(item.date.slice(5,10))
            NumOne.push(item.today.confirm)
            NumTwo.push(item.today.suspect)
          })
          this.$nextTick(() => {
            this.init(HalfDate, NumOne, NumTwo);
          });
        } else {
          this.pageflag = false;
          this.$Message({
            text: res.msg,
            type: "warning",
          });
        }
      });
    },
    init(HalfDate,NumOne,NumTwo) {
      this.option = {
        
        tooltip: {
          show: true,
          trigger: "axis",
          backgroundColor: "rgba(255, 255, 255, .16)", // 设置背景颜色
          textStyle: {
            color: "#fff",
            fontSize: 14,
          },
          borderColor: "rgba(255, 255, 255, .16)",
          axisPointer: {
            lineStyle: {
              color: "rgba(28, 124, 196, .6)",
            },
          },
          // formatter: "{b}人员类别统计<br>{c}人"
          formatter: function (params, ticket, callback) {
            var htmlStr = "";
            for (var i = 0; i < params.length; i++) {
              var param = params[i];
              var xName = param.name + "疫情情况"; //x轴的名称
              var seriesName = param.seriesName; //图例名称
              var value = param.value; //y轴值
              var color = param.color; //图例颜色
              if (i === 0) {
                htmlStr += xName + "<br/>"; //x轴的名称
              }
              htmlStr += "<div>";
              htmlStr +=
                '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' +
                color +
                ';"></span>'; //一个点
              htmlStr += seriesName + "：" + value + "人"; //圆点后面显示的文本
              htmlStr += "</div>";
            }
            return htmlStr;
          },
        },
        color: ["#FF0000", "#F39800", "#16D6FF", "#25D677"],
        legend: {
          // icon: 'circle',
          // itemWidth: 10,
          itemGap: 4,
          x: "left",
          top: "1%",
          textStyle: {
            color: "#fff",
            fontSize: 13,
            // padding:[0, 6, 0, 6],
          },
        },
        grid: {
          top: "18%",
          left: "12%",
          right: "2%",
          bottom: "18%",
        },
        xAxis: [
          {
            type: "category",
            axisLine: {
              lineStyle: {
                color: "#2D4377",
              },
            },
            axisLabel: {
              interval: 0,
              align: "center",
              rotate: "26",
              margin: "20",
              textStyle: {
                fontSize: 14,
                color: "#A9C3F0",
              },
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            boundaryGap: true,
            data: HalfDate, //this.$moment(data.times).format("HH-mm") ,
          },
        ],

        yAxis: [
          {
            type: "value",
            min: 0,
            max: 40000,
            splitNumber: 6,
            axisLine: {
              lineStyle: {
                color: "#2D4377",
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "#2D4377",
                type: "dashed",
              },
            },
            axisLabel: {
              color: "#A9C3F0",
              textStyle: {
                fontSize: 14,
              },
            },
            axisTick: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: "确诊",
            type: "line",
            showSymbol: true,
            symbolSize: 8,
            lineStyle: {
              normal: {
                color: "#FF2E2E",
              },
            },
            itemStyle: {
              color: "#FF2E2E",
              borderColor: "#FF2E2E",
              borderWidth: 2,
            },
            // emphasis: {
            //     itemStyle: {
            //         color: "#fff",
            //         borderColor: "#FF2E2E",
            //         borderWidth: 2,
            //     },
            // },
            data: NumOne, //data.values
          },
          {
            name: "疑似",
            type: "line",
            showSymbol: true,
            symbolSize: 8,
            lineStyle: {
              normal: {
                color: "#F39800",
              },
            },
            itemStyle: {
              color: "#F39800",
              borderColor: "#F39800",
              borderWidth: 2,
            },
            // emphasis: {
            //     itemStyle: {
            //         color: "#fff",
            //         borderColor: "#F39800",
            //         borderWidth: 2,
            //     },
            // },
            data: NumTwo, //data.values
          },
        ],
      };
    },
  },
};
</script>
<style lang='scss' scoped>
.right_top_inner {
  margin-top: -8px;
}
</style>